const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
})
let map = new ol.Map({
    target: 'map',
    layers: [
        tile
    ],
    view: new ol.View({
        center: [12676737.157879721, 2578348.6131051104],
        zoom: 15.4,
    })
});

fetch('./data/polygon.geojson').then(res => res.json()).then(res => {
    const drawTool = new DrawTool(map.getViewport())
    res = res.features.map(f => {
        return f.geometry.coordinates[0][0]
    })
    let showData = () => {
        res.forEach(r => {
            r = r.map(i => {
                return map.getPixelFromCoordinate(ol.proj.fromLonLat(i))
            })
            drawTool.drawLine(r, {
                strokeWidth: 2
            })
        })
    }
    map.on('movestart', () => {
        drawTool.clear()
    })
    map.on('moveend', () => {
        showData()
    })
})

